<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <title>ADN - Autodesk Forge Viewer Node.js Extractor example</title>
    <meta content="ADN - Autodesk Forge Viewer Node.js Extractor example" name="description" />
    <meta content="Extractor Node.js Forge Viewer" name="keywords" />
    <meta content="Autodesk" name="author" />
    <link href="favicon.ico" rel="shortcut icon" />

    <!-- icons-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <link href="/bower_components/jquery-ui/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <script src="/bower_components/jquery-ui/jquery-ui.js"></script>
    <link href="/css/ionicons.css" rel="stylesheet" />
    <link href="/css/maria-theme-checkbox.css" rel="stylesheet" />
    <link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <link href="/css/maria-base-theme.css" rel="stylesheet" />
    <link href="/css/maria-theme.css" rel="stylesheet" />
    <!--link href="/css/open-sans.css" rel="stylesheet" /-->
    <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
    <link href="/css/custom.css" rel="stylesheet" />
	<link href="/css/vignettes.css" rel="stylesheet" />
    <link href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css" rel="stylesheet" />
    <script src="//www.fuelcdn.com/fuelux/3.12.0/js/fuelux.min.js"></script>

    <script src="/bower_components/flow.js/dist/flow.js"></script>
    <script src="/js/upload-flow.js"></script>

    <script src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="pdnli15y8271xkf"></script>
    <script src="https://app.box.com/js/static/select.js"></script>
    <link href="/js/loaders.css" rel="stylesheet" />
    <script src="/js/loaders.js"></script>
    <script src="https://www.google.com/jsapi?key=AIzaSyAsdhYT8LmF3YMkd7v76oiauI4fHH0d5bc"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleDriveOnloadInit"></script>
    <script src="https://js.live.net/v5.0/OneDrive.js"></script>

    <!-- reCaptcha -->
    <script src='https://www.google.com/recaptcha/api.js'></script>

	<script src="/bower_components/jquery.cookie/jquery.cookie.js"></script>
	<script src="/js/app.js"></script>
</head>

<body data-spy="scroll" data-target="#nav-parent" class="fuelux">

<!-- NAVBAR -->
<div class="bs-docs-section clearfix" id="navbar">
    <div class="row">
        <div class="col-lg-12">
            <div class="bs-component">
                <div class="navbar navbar-default app-navbar">
                    <div class="container app-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="https://developer.autodesk.com/"><img width="160px;" src="/images/Autodesk_logo.png" style="padding: 20px;"></a>
                        </div>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="https://github.com/cyrillef/extract.autodesk.io">View on GitHub <i class="fa fa-github-alt fa-fw"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- HEADER -->
<div class="clearfix">
    <div class="row fullscreen-scroller">
        <div class="col-lg-12 animation-container">
            <div class="output">
                <script src="/js/fss.js"></script>
                <script src="/js/background-animation.js"></script>
            </div>

            <div class="page-header content-header app-content-header api-detail-header view-and-data-api" id="title">
                <div class="container app-container">
                    <div class="col-xs-12 col-sm-6 col-md-9 col-lg-9 app-title-container">
                        <h1 id="view-and-data-title"><a href="http://developer-autodesk.github.io/" target="_blank">Autodesk Developer</a></h1>
                        <h1 id="view-and-data-title">Autodesk Forge Viewer - Model Extractor</h1>
                    </div>
                    <!--<p>Embedding vibrant 3D graphics in a Web Browser,
                        Support for almost 100 formats,
                        fast streaming large 2D and 3D models </p>-->
                    <!--div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 app-button-container">
                        <p class="bs-component">
                            <a href="https://developer.autodesk.com/" class="btn app-btn app-btn-lg app-btn-primary create-app-btn pull-right">Create an App<span class="bg-icon size-21"><i class="icon ion-chevron-right"></i></span></a>
                        </p>
                    </div-->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MAIN CONTENT -->
<!-- http://getbootstrap.com/examples/theme/ -->
<div class="content-form app-content-form clearfix">
    <div class="container app-container">


	    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
		    <li id="create-project-tab" class="active"><a href="#create" data-toggle="tab">Project Workspace</a></li>
		    <li id="view-project-tab"><a href="#view" data-toggle="tab">View submitted Projects
                &nbsp;&nbsp;&nbsp;&nbsp;
                <i class="fa fa-search" aria-hidden="true"></i>
                <input type="search"
                       name="searchText" id="searchText"
                       placeholder="Search Project" />

            </a></li>

	    </ul>

	    <div id="tab-content" class="tab-content">
		    <!-- Create a Project -->
		    <div class="tab-pane active" id="create">
		        <div class="row">
		            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		                <div class="panel panel-default app-panel-default">
		                    <div class="panel-body app-panel-body app-api-doc">
		                        <div class="app-api-section">
		                            <div class="app-api-section-heading">
		                                <h2 class="app-api-section-title first-child">Upload your design files below</h2>
		                            </div>
		                            <!-- Upload widgets -->
		                            <div class="modal-dialog" id="upload-modal">
		                                <div class="modal-body upload-zone">
		                                    <div class="row">
		                                        <div class="col-sm-8 hidden-xs">
		                                            <div class="droparea">
		                                                <div class="vert-center">
		                                                    <img src="/images/upload.svg" />
		                                                    <span class="line1">Drag &amp; Drop</span>
		                                                    <span class="line2">Your design files here</span>
		                                                </div>
		                                                <div class="pick-files-container">
		                                                    <input type="file" name="userFile" class="user-files" multiple="" />
		                                                </div>
		                                            </div>
		                                        </div>

		                                        <div class="col-xs-12 col-sm-4">
		                                            <div class="upload-buttons">
		                                                <ul>
		                                                    <li>
		                                                        <input type="file" name="userFile" class="user-files" multiple="" />
		                                                        <img src="/images/computer_32.svg" /> Upload files...
		                                                    </li>

		                                                    <li class="folder-option">
		                                                        <input type="file" name="userFolder" multiple="" webkitdirectory="" id="browseFolder" />
		                                                        <img src="/images/folder_32.svg" /> Upload folder...
		                                                    </li>
		                                                </ul>

		                                                <ul>
		                                                    <li id="dropbox">
		                                                        <a href="javascript:void(0);">
		                                                            <img src="/images/dropbox_32.svg" /> Dropbox
		                                                        </a>
		                                                    </li>
		                                                    <li id="box">
		                                                        <a href="javascript:void(0);">
		                                                            <img src="/images/box_32.svg" />
		                                                            Box
		                                                        </a>
		                                                    </li>
		                                                    <li id="gDrive">
		                                                        <a href="javascript:void(0);">
		                                                            <img src="/images/googleDrive_32.svg" /> Google Drive
		                                                        </a>
		                                                    </li>
		                                                </ul>
		                                            </div>
		                                        </div>
		                                    </div>

		                                    <div class="row">
		                                        <div class="col-sm-12 hidden-xs">
		                                            <div class="upload-buttons">
		                                                <ul>
		                                                    <li id="uri-input">
			                                                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">uri:</div>
			                                                    <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
		                                                            <div class="input-group">
		                                                                <input type="text" title="http(s) / S3 uri" />
		                                                                <span class="input-group-btn">
		                                                                    <button type="button" class="btn btn-default btn-sm">
		                                                                        <span class="glyphicon glyphicon-chevron-right"></span>
		                                                                    </button>
		                                                                </span>
		                                                            </div>
			                                                    </div>
		                                                    </li>
		                                                </ul>
		                                            </div>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <!-- Upload widgets -->
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>

		        <div id="fileUploadArea" class="row noshow0">
		            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		                <div class="panel panel-default app-panel-default">
		                    <div class="panel-body app-panel-body app-api-doc">
		                        <div class="app-api-section">
		                            <div class="col-md-offset-1">
		                                <div class="list-group">
		                                    <!-- This items below is a template for the Flow.js upload code -->
		                                    <div id="fileupload-sample" class="alert alert-info noshow" role="alert">
                                                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 glyphicon glyphicon-cloud-upload"></div>
		                                        <!-- div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><i class="fa fa-file-code-o fa-2x pull-left"></i></div -->
		                                        <div class="flow-file-name col-xs-4 col-sm-4 col-md-4 col-lg-4">test.jpg</div>
		                                        <div class="flow-file-progress col-xs-7 col-sm-7 col-md-7 col-lg-7">
			                                        <progress min="0" max="100" value="0" class="jquery" /></div>
		                                    </div>
                                            <div id="fileupload-sample-sub" class="alert alert-info noshow" role="alert">
                                                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
                                                <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 glyphicon glyphicon-ok"></div>
                                                <div class="flow-file-name col-xs-10 col-sm-10 col-md-10 col-lg-10">test.jpg</div>
                                            </div>
			                                <!-- Items here will be added by cloning the one above -->

		                                </div>
		                            </div>
			                        <div class="row">
                                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-block">
                                            <button id="help-information" type="button" class="btn btn-info center-block">Help</button>
                                        </div>
				                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-block">
					                        <button id="clear-workspace" type="button" class="btn btn-primary center-block">Clear workspace</button>
				                        </div>
				                        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 center-block">
					                        <button id="submit-project" type="button" class="btn btn-primary center-block">Submit my project</button>
                                            <br />
                                            <div class="g-recaptcha" data-callback="imNotARobot" data-expired-callback="imARobot" data-sitekey="6LdOjzwUAAAAANg4YdC5BKR5jmbT22B9CRBgqNaw"></div>
				                        </div>
			                        </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
			</div>

		    <!-- View Projects -->
		    <div class="tab-pane" id="view">
			    <div class="row">
				    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					    <div class="panel panel-default app-panel-default">
						    <div class="panel-body app-panel-body app-api-doc">
							    <div class="app-api-section">
								    <!--div class="app-api-section-heading">
									    <h2 class="app-api-section-title first-child">Submitted Projects</h2>
								    </div-->
								    <div class="modal-dialog" id="project-results"></div>
							    </div>
						    </div>
					    </div>
				    </div>
			    </div>

			    <!-- Modeless Project Progress -->
			    <div id="projectProgressDialog" class="modal fade modeless" role="dialog">
				    <div class="modal-dialog">
					    <div class="modal-content">
						    <div class="modal-header">
							    <button type="button" class="close" data-dismiss="modal">&times;</button>
							    <h4 class="modal-title">Project Progress</h4>
						    </div>
						    <div id="projectProgress" class="modal-body">
							    ...
						    </div>
						    <div class="modal-footer">
							    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						    </div>
					    </div>
				    </div>
			    </div>
		    </div>

	    </div>

    </div>
</div>

<!-- FOOTER  -->
<div class="clearfix">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="page-footer">
                <div class="container app-container">
                    <p>&#169; Copyright Autodesk. All rights reserved. </p>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Bootstrap's modal dialog-->
<div id="MaintenanceMsg" class="modal fade modal-lg">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-lg vertical-align-center">
            <div class="modal-content panel-danger">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">This site in under maintenance</h4>
                </div>
                <div class="modal-body">
                    This site is temporary unavailable for maintenance reason.<br />
                    You cannot submit new projects or extract the Bubble during this time, but you can still see previous projects.<br />
                    <br />
                    If you are in hurry, you can deploy your own instance using Heroku for example using the instructions on this <a href="https://github.com/cyrillef/extract.autodesk.io">page</a>.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap's modal dialog-->
<div id="HelpMsg" class="modal fade modal-lg">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-lg vertical-align-center">
            <div class="modal-content panel-info">
                <div class="modal-header panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">What is this sample about?</h4>
                </div>
                <div class="modal-body">
                    <div id="usage">
                        <p>This sample is to demonstrate how to extract the viewables (aka 'bubbles') after translation
                            from the Autodesk server. It is possible for you to download each individual fragment
                            from the server using the RESTful API. This sample simply extracts all fragments and
                            create a zip file for you to download.</p>
                        <p>There is no guarantee your file will be kept on this sample forever. However, you got
                            full control on the time life of your design file and 'bubbles' on this server and
                            Autodesk server.</p>
                        <p>How to use the sample: (<a href="https://github.com/cyrillef/extract.autodesk.io/blob/master/README.md#UseOfTheSample">more instructions</a>)
                        <ol>
                            <li>Upload one design file (and it dependencies) you want to process <br />
                                Files can be uploaded as a ZIP file or multiple files. The application will
                                assemble all files together automatically for you</li>
                            <li>If your model depends on multiple files, make sure to point to the master
                                file by assign the <span class="glyphicon glyphicon-home"> </span> icon to it</li>
                            <li>Launch the translation process by clicking on the 'Submit my project' button</li>
                            <li>... wait ...</li>
                            <li>View and verify the results</li>
                            <li>Request the extraction zip file</li>
                            <li>Optionally delete the project (this can be done at any time)</li>
                        </ol>
                        </p>
                        <p>After extraction:</p>
                        <ol>
                            <li>Unzip the file on your hardrive</li>
                            <li>If you have node.js and node.js http-server already installed on your computer,
                                launch the local viewer by running the index.bat (Windows) or ./index (OSX/Linux)</li>
                            <li>If you do not have have node.js http-server installed,
                                read instructions <a href="https://github.com/cyrillef/extract.autodesk.io/blob/master/README.md#node">here</a></li>
                            <li>If you prefer using Python, Apache/PHP, or other WEB technologies,
                                read instructions <a href="https://github.com/cyrillef/extract.autodesk.io/blob/master/README.md#others">here</a></li>
                        </ol>
                        <p>Reporting issues:</p>
                        <ol>
                            <li><a href="https://github.com/cyrillef/extract.autodesk.io/issues" target="GitHub">Report on GitHub</a></li>
                            <li><a href="mailto:forge.help@autodesk.com?Subject=extract.autodesk.io%20problem">Email us</a></li>
                        </ol>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
	(function (i, s, o, g, r, a, m) { i ['GoogleAnalyticsObject']= r ; i [r] =i [r] || function () {
		(i [r].q= i [r].q || []).push (arguments) }, i [r].l =1 * new Date () ; a =s.createElement (o),
		m =s.getElementsByTagName (o) [0] ; a.async =1 ; a.src =g ; m.parentNode.insertBefore (a, m)
	}) (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga') ;
	ga ('create', 'UA-71558670-1', 'auto');
	ga ('send', 'pageview') ;
</script>

</body>
</html>
